import { Component, OnInit } from '@angular/core';
import { NgModule }      from '@angular/core';
import { FormsModule }   from '@angular/forms';
import * as $ from 'jquery';
import {Room} from './room';
@Component({
  selector: 'app-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.css']
})
export class IndexComponent implements OnInit {
   rooms=[]
   room: Room = {id:1,x:1,y:1,height:1,width:1}
   isdraw:boolean = false;
   isDrawing:boolean = false
  constructor() { }

   isStartDraw() {
        this.isdraw = !this.isdraw;
    }
   
  ngOnInit() {
    var _this = this,isMove,infoX,infoY;
    $(document).mousedown(function(e){
        console.log(e);
        if(e.target.id === "father" && _this.isdraw){
            _this.room.x=e.offsetX;
            _this.room.y=e.offsetY;
            _this.room.id=Math.round(Math.random()*100)
            console.log(222);
            _this.isDrawing=true;
        }else if(e.target.className ==="son"){
            console.log("开始移动了");
            let isMove = true;
            let infoX= e.offsetX;
            let infoY= e.offsetY;
        }
        
    })
    $(document).mousemove(function(e){
        if(e.target.id==="father" && _this.isDrawing){
            _this.room.width=e.offsetX-_this.room.x;
            _this.room.height=e.offsetY- _this.room.y;  
        }else if(e.target.className ==="son" && isMove ){
            
        }
        
        
    })
   
    $(document).mouseup(function(e){
        if(e.target.id ==="father" && _this.isDrawing){
            let _room: Room={id:1,x:1,y:1,height:1,width:1};
            _room.id =_this.room.id;
            _room.x = _this.room.x;
            _room.y = _this.room.y;
            _room.height = _this.room.height;
            _room.width =_this.room.width;
        _this.rooms.push(_room);
        _this.room.id = 0;
        _this.room.x = 0;
        _this.room.y = 0;
        _this.room.height = 0;
        _this.room.width = 0;
        _this.isdraw = false;
        _this.isDrawing=false;
        $(".checkbox").prop("checked",false);
        }
        
    })


  }
  }

